<template>
  <div>
    <!-- 已提交，查看的情况 -->
    <template v-if="mdl.finished === 1">
      <el-row :gutter="20" class="pl20">
        <el-col
          :span="8"
          class="mt20 mb20"
          v-for="(item,index) in mdl.internalTypeVOList"
          :key="index"
        >
          <el-card shadow="never" class="overflow-card">
            <div class="tl-center" slot="header">{{ item.internalTypeName }}</div>
            <!-- 已考评的 -->
            <el-col
              :class="[ind % 2 === 0 ? 'bg-stripe' : '', 'mb20']"
              v-for="(ite,ind) in item.internalNoteVOList"
              :key="ind"
            >
              <!-- <el-form-item label="项目名称">{{ ite.internalItemName }}</el-form-item>
              <el-form-item label="评价等级">{{ ite.internalLevelName }}</el-form-item>
              <el-form-item label="评价理由">{{ ite.reason }}</el-form-item>-->

              <el-col class="mb10">项目名称：{{ ite.internalItemName }}</el-col>
              <el-col class="mb10">评价等级：{{ ite.internalLevelName }}</el-col>
              <el-col class="mb10" v-if="ite.reason">评价理由：{{ ite.reason }}</el-col>

              <!-- <el-radio
                :checked="true"
                :label="ite.internalLevelId"
                v-model="ite.internalLevelId"
              >{{ ite.internalLevelName }}</el-radio>-->
            </el-col>
          </el-card>
        </el-col>
      </el-row>
    </template>
    <!-- 未提交，进行操作 -->
    <template v-else>
      <el-row class="pl20 pr20" v-if="mdl.internalTypeVOList && mdl.internalTypeVOList.length > 0">
        <el-col
          class="mb20"
          :span="18"
          :offset="3"
          v-for="(item,index) in mdl.internalTypeVOList"
          :key="index"
        >
          <el-card class="mt20" shadow="never">
            <div slot="header" class="tl-center">
              {{ item.internalTypeName }}
              <el-button type="primary" class="fr" size="small" @click="handleSetAll(item)">全部设置</el-button>
            </div>
            <div v-for="(it,ind) in item.internalPlanItemList" :key="ind">
              <p>项目名称：{{ it.internalItemName }}</p>
              <el-radio-group
                @change="e => radioChange(e, it)"
                v-model="it.radioValue"
                style="width: 100%"
              >
                <el-col
                  v-for="ite in it.internalPlanLevelList"
                  :key="ite.internalLevelId"
                  :span="3"
                >
                  <el-radio :label="ite.internalLevelId">{{ ite.internalLevelName }}</el-radio>
                </el-col>
              </el-radio-group>
              <span
                style="margin-right: 5px"
                v-show="it.radioValue && it.internalPlanLevelList[it.internalPlanLevelList.findIndex(v => v.internalLevelId === it.radioValue)].necReason"
                class="red"
              >*</span>
              <el-input
                class="mt10"
                v-model="it.reason"
                @input="e => handleInput(e, index, ind)"
                style="width: 50%"
                placeholder="请输入理由"
              />
            </div>
          </el-card>
        </el-col>
        <!-- v-if="listData.findIndex(v => v.internalTaskDetailId === mdl.internalTaskDetailId) === listData.length - 1" -->
        <el-button
          v-if="mdl.internalTypeVOList.length > 0"
          type="primary"
          @click="handleSubmit"
          class="submitBtn mt20 mb20"
        >提交</el-button>
      </el-row>
    </template>
    <level-modal ref="levelModal" @setRadio="handleSetRadio" />
  </div>
</template>

<script>
import { getSession, openNotification, removeSession } from '@/utils/util'
import { internalCreate } from '@/api/satisfaction'
import LevelModal from './LevelModal'

export default {
  components: {
    LevelModal
  },
  props: {
    list: {
      type: Object
    },
    arr: {
      type: Array
    }
  },
  watch: {
    list: {
      handler(n, o) {
        this.mdl = Object.assign({}, n)
      },
      deep: true
    },
    arr: {
      handler(n, o) {
        this.listData = [...n]
      }
    }
  },
  data() {
    return {
      listData: [],
      mdl: {},
      index: 0
    }
  },
  methods: {
    handleSetAll(item) {
      this.$refs.levelModal.edit(item)
    },
    handleSetRadio(id) {
      console.log('levelId', id)
      this.mdl.internalTypeVOList.map((v, index) => {
        v.internalPlanItemList.map((a, ind) => {
          // a.radioValue = id
          this.$set(this.mdl.internalTypeVOList[index].internalPlanItemList[ind], 'radioValue', id)
        })
      })
    },
    edit(obj) {
      this.mdl = Object.assign({}, obj)
    },
    handleInput(e, firstInd, secondInd) {
      // console.log('e', e, firstInd, secondInd)
      this.mdl.internalTypeVOList[firstInd].internalPlanItemList[secondInd].reason = e
    },
    async submitRequest(arr, mes) {
      const res = await internalCreate(arr)
      // console.log('res112233', res)
      if (res.state === '000000') {
        openNotification('success', mes)
        // removeSession('startTestRow')
        // removeSession('startTestType')
        // this.$router.push({
        //   name: 'satisfactionTask'
        // })
        this.$emit('refresh')
      }
    },
    handleSubmit() {
      let param = []
      let submit = true
      let reason = true

      // 全部提交的情况
      // this.listData.map(v => {
      //   // 所有被考评人员或科室循环
      //   let key = v.targetUserId ? 'targetUserId' : 'targetDeptId'
      //   let value = v.targetUserId ? v.targetUserId : v.targetDeptId
      //   v.internalTypeVOList.map(j => {
      //     // 每一项的 internalTypeVOList 循环
      //     submit = j.internalPlanItemList.every(a => a.radioValue)
      //     j.internalPlanItemList.map(a => {
      //       // 里面的 internalPlanItemList 循环
      //       param.push({
      //         targetId: v.targetId,
      //         internalLevelId: a.radioValue,
      //         reason: a.reason,
      //         [`${key}`]: value,
      //         internalItemId: a.internalItemId,
      //         internalTaskId: v.internalTaskId,
      //         internalPlanId: a.internalPlanId,
      //         internalTaskDetailId: v.internalTaskDetailId
      //       })
      //     })
      //   })
      // })

      let key = this.mdl.targetUserId ? 'targetUserId' : 'targetDeptId'
      let value = this.mdl.targetUserId ? this.mdl.targetUserId : this.mdl.targetDeptId
      console.log('提交 mdl', this.mdl, value)

      this.mdl.internalTypeVOList.map(v => {
        v.internalPlanItemList.map(j => {
          param.push({
            targetId: this.mdl.targetId,
            internalLevelId: j.radioValue,
            reason: j.reason,
            [`${key}`]: value,
            internalItemId: j.internalItemId,
            internalTaskId: this.mdl.internalTaskId,
            internalPlanId: j.internalPlanId,
            internalTaskDetailId: this.mdl.internalTaskDetailId
          })
        })
      })

      this.mdl.internalTypeVOList.map(v => {
        v.internalPlanItemList.map(j => {
          if (!j.radioValue) {
            submit = false
            return false
          }
        })
      })

      if (submit) {
        // 搜索项目都已选择
        // console.log('internalTypeVOList', this.mdl.internalTypeVOList)

        this.mdl.internalTypeVOList.map((v, index) => {
          v.internalPlanItemList.map((j, ind) => {
            // radioValue 是 levelID 赋值的，如果选项只有4个，levelID 为6 ，则就会报错
            let arr = j.internalPlanLevelList.filter(a => j.radioValue === a.internalLevelId)
            let necReason = arr[0].necReason
            // 获取每个选项的设置理由是否为必填

            // let submit = arr.some(a => a.necReason)
            // console.log('ind', arr, submit)

            if (necReason && !j.reason) {
              // 判断理由是否为必填，以及是否输入了理由
              // let mes = `第${index + 1}个分类的第${ind + 1}个项目选择${arr[0].internalLevelName}时，需要填写理由`
              // this.$message.error(mes)
              reason = false
              return false
            }
          })
        })
        console.log('提交', param)

        if (reason) {
          this.submitRequest(param, '提交操作成功')
        } else {
          this.$message.error('部分选项理由未填写')
        }
      } else {
        // 有项目未选择
        this.$message.error('请完成所有的项目选择再进行提交')
      }
    },
    radioChange(e, it) {
      // console.log('radio', e, it)
    }
  },
  created() {
    this.mdl = Object.assign({}, this.list)
    this.listData = [...this.arr]
  }
}
</script>

<style scoped>
.classify-li {
  border-bottom: 1px solid #ccc;
}

.bg-stripe {
  background: #f8f8f8;
}
.submitBtn {
  width: 50%;
  margin-left: 25%;
  height: 40px;
}
</style>
